<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <!-- 1.按顺序引入vue和vue-route的js文件 -->
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>
<body>
    <div id='app'>
        <!-- 2.创建路由跳转连接，router-link就相当于a连接标签，to就相当于a连接的href属性 -->
        <router-link to="/index">index</router-link>
        <router-link to="/post">post</router-link>
        <router-link to="/category">category</router-link>

        <!-- 3.占坑位，用于展示路由组件中的模板 -->
        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        // 4.创建组件
        const index = {
            template: `<h1>主页页面</h1>`
        }
        const post = {
            template: `<h1>文章列表页面</h1>`
        }
        const category = {
            template: `<h1>分类页面</h1>`
        }

        // 5.实例router对象
        var router = new VueRouter({
            routes: [
                //路由重定向redirect的使用
                { path: '/', redirect: '/index'},
                { path: '/index', component: index},
                { path: '/post', component: post}, 
                { path: '/category', component: category}
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            //6.挂载router组件
            router
        });
    </script>
</body>
</html>